<template>
  <div>
    <h2>form-demo</h2>
    <devin-form @form-submit="onSubmit">
      <devin-input
        ref="inputDom"
        title="文本"
        :rules="textRules"
        v-model="textVal"
        placeholder="请输入文章"
      />
      <devin-input title="邮箱" :rules="emailRules" v-model="emailVal" />
      <devin-input title="数字" :rules="numRules" v-model="numVal" />
    </devin-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";

import DevinInput from "./components/devin-input.vue";
import DevinForm from "./components/devin-form.vue";

export default defineComponent({
  components: {
    DevinInput,
    DevinForm,
  },
  setup(props, context) {
    const inputDom = ref<any>();

    const inputRef = reactive({
      textVal: "",
      emailVal: "",
      numVal: "",
    });

    const textRules = [
      { type: "required", message: "文本不能为空" },
      { type: "text", message: "请输入文本" },
    ];
    const emailRules = [
      { type: "required", message: "电子邮箱地址不能为空" },
      { type: "email", message: "请输入正确的邮箱格式" },
    ];
    const numRules = [
      { type: "required", message: "数字不能为空" },
      { type: "number", message: "请输入数字" },
    ];

    const onSubmit = (result: any) => {
      console.log("result....:", result, inputRef);
      // console.log('...onSubmit:', inputDom.value.onValideInput())
    };

    return {
      ...toRefs(inputRef),
      textRules,
      emailRules,
      numRules,
      inputDom,
      onSubmit,
    };
  },
});
</script>
